<p>ZUI的界面应该简洁，易于识别，让人感觉舒适而不失严谨。所使用的配色应该尽可能达到该目的。</p>
<p>ZUI的配色表包含三部分：主要颜色，灰度颜色及额外颜色。</p>
<h3>主要颜色</h3>
<p>
包含3～5种颜色，决定了ZUI界面整体色调。虽然并没有强制的规则来决定如何指定主要颜色，但最好是使用同一色调的不同明度的颜色。一般选取2深色+2浅色+1强调色。主要颜色会用在菜单、导航、链接、高亮选项等。</p>
<p>在ZUI的默认配色方案中，主要颜色均为同一色系。</p>
<div class="colorset">
  <div class="color-primary"></div>
  <div class="color-secondary"></div>
  <div class="color-pale"></div>
  <div class="color-fore"></div>
  <div class="color-back"></div>
</div>
<h3>灰度颜色</h3>
<p>
灰度颜色强制使用同一色调不同亮度的一组颜色。在无特别需求的情况下，一般使用黑色灰度。灰度颜色会用在块的背景，边框，次要的文本上。灰度颜色为界面创建了层次感，加深了内容与内容间的边界，更易于体现内容的重要程度。</p>
<div class="colorset">
  <div class="color-gray-darker"></div>
  <div class="color-gray-dark"></div>
  <div class="color-gray"></div>
  <div class="color-gray-light"></div>
  <div class="color-gray-lighter"></div>
  <div class="color-gray-pale"></div>
</div>
<div class="colorset">
  <div class="color-white"></div>
  <div class="color-black"></div>
</div>
<div class="colorset">
  <div class="color-light"></div>
  <div class="color-dark"></div>
</div>
<h3>额外颜色</h3>
<p>额外的颜色为特殊控件提供的更多的色彩选择。例如各种级别的消息框，特殊作用的按钮，特殊文本等。</p>
<div class="colorset">
  <div class="color-red"></div>
  <div class="color-yellow"></div>
  <div class="color-green"></div>
  <div class="color-blue"></div>
  <div class="color-brown"></div>
  <div class="color-purple"></div>
</div>
<div class="colorset">
  <div class="color-danger"></div>
  <div class="color-warning"></div>
  <div class="color-success"></div>
  <div class="color-info"></div>
  <div class="color-important"></div>
  <div class="color-special"></div>
</div>
<div class="colorset">
  <div class="color-success-pale"></div>
  <div class="color-warning-pale"></div>
  <div class="color-danger-pale"></div>
  <div class="color-info-pale"></div>
  <div class="color-important-pale"></div>
  <div class="color-special-pale"></div>
</div>
<div class="colorset">
  <div class="color-1"></div>
  <div class="color-2"></div>
</div>
<h3>配色设计要点</h3>
<ul>
  <li>配色表中的每种颜色都可以在亮度上上下浮动10%左右来生成一个相近但又有些许不同的颜色作为边框及悬停渐变使用。</li>
  <li>在界面中运用的所有配色尽量使用配色表中已列明的颜色；</li>
  <li>优先使用主要颜色和灰度颜色，仅在特殊的按钮或消息时才使用额外颜色；</li>
</ul>
